import React, { Component } from 'react'
import { homeListUrl, imgUrl } from '@/api'
import { connect } from 'react-redux'
import { changeHomeListAction, delHomeListAction } from '@/store/modules/Home/homeActiveCreate.js'
import style from './homelist.module.scss'

class CategoryList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            itemid: ''
        }
    }
    render() {
        return (
            <>
                {
                    this.props.homeList?.items?.map((item, index) => {
                        // console.log(item.restaurant, 789789);
                        return (
                            <div key={index}>
                                <div className={style.homelistitem}>
                                    {this.isDislike(item.restaurant.id)}
                                    <img className={style.businessLogo} src={imgUrl + item.restaurant.image_path} alt="" />
                                    <div className={style.itemRightBox}>
                                        <p className={style.itemTitle}>{item.restaurant.name}</p>
                                        <div className={style.dislike} onClick={() => { this.changeitemid(1, item.restaurant.id) }}>...</div>
                                        <div>
                                            <div className={style.startBox}>{this.numstars(item.restaurant.rating)}{item.restaurant.rating} {'月售' + item.restaurant.recent_order_num + '单'}</div>
                                            <div className={style.startBoxTwo}><span>{(item.restaurant.distance / 1000).toFixed(1)}km</span> | <span>{item.restaurant.order_lead_time}分钟</span></div>
                                        </div>
                                        <div>{
                                            item.restaurant.flavors.map((item) => {
                                                return (<span className={style.labelBox} key={item.id}>{item.name}</span>)
                                            })
                                        }</div>
                                        <div className={style.activitiesBox}>
                                            {
                                                item.restaurant.activities.map((item) => {
                                                    return (
                                                        <div className={style.activitiesItem} key={item.id}>
                                                            <i className={style.itemIcon} style={{ background: "#" + item.icon_color }}>{item.icon_name}</i>
                                                            {item.tips}
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </>
        )
    }
    componentDidMount() {
        homeListUrl().then((res) => {
            // console.log(res, 123456);
            res.items.forEach(item => {
                // 开头
                let a = item.restaurant.image_path.slice(0, 1) + '/'
                let b = item.restaurant.image_path.slice(1, 3) + '/'
                // 结尾 图片格式
                let c;
                let d = item.restaurant.image_path.slice(3)
                if (item.restaurant.image_path.indexOf("png") !== -1) {
                    c = "." + item.restaurant.image_path.slice(-3)
                } else {
                    c = "." + item.restaurant.image_path.slice(-4)
                }
                let imgpath = a + b + d + c
                item.restaurant.image_path = imgpath
            })
            this.props.changeHomeListFn(res)
        })
    }
    //星星数量
    numstars = (num) => {
        if (num < 1) {
            return (<><i className={'iconfont icon-start ' + style.startI}></i></>)
        } else if (num < 2) {
            return (<>
                <i className={'iconfont icon-start ' + style.startI}></i>
            </>)
        } else if (num < 3) {
            return (<>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
            </>)
        } else if (num < 4) {
            return (<>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
            </>)
        } else if (num < 5) {
            return (<>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
                <i className={'iconfont icon-start ' + style.startI}></i>
            </>)
        }
    }
    //不喜欢模块
    isDislike = (id) => {
        if (this.state.itemid === id) {
            return (<div className={style.dislikeBox} onClick={this.changeitemid}>
                <div className={style.dislikebtn} onClick={() => { this.delItem(id) }}>不喜欢</div>
            </div>)
        }
    }
    //显示和隐藏不喜欢
    changeitemid = (num, id) => {
        if (num === 1) {
            this.setState({
                itemid: id
            })
        } else {
            this.setState({
                itemid: ''
            })
        }
    }
    delItem = (id) => {
        // console.log(id, '删除item');
        this.props.delHomeListItemFn(id)
    }
}

const stateToProps = (state) => {
    // console.log(state, 456456456);
    return {
        currentLocation: state.region.currentLocation,
        LocationSelected: state.shipping.LocationSelected,
        islogin: state.user.isLogin,
        homeList: state.home.homeList
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeHomeListFn: (value) => {//修改所在位置
            let action = value;
            dispatch(changeHomeListAction(action))
        },
        delHomeListItemFn: (value) => {//删除homelist数据
            let action = value;
            dispatch(delHomeListAction(action))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(CategoryList)
